<template>
  <div class="problem-view">

    <el-button size="medium" type="text" icon="el-icon-circle-plus-outline" @click="addClick" v-if="!isDisbale">
      创建问题
    </el-button>

    <el-table
      @row-click="tableRowClick"
      size="medium"
      :data="tableData"
      border
      align="center"
      style="width: 100%">
      <el-table-column
        align="center"
        prop="problem_no"
        label="问题编号">
      </el-table-column>
      <el-table-column
        v-if="isProject"
        align="center"
        prop="task_name"
        label="所属任务">
      </el-table-column>
      <el-table-column
        align="center"
        prop="priority"
        label="优先级">
      </el-table-column>
      <el-table-column
        align="center"
        prop="problem_name"
        label="问题名称">
      </el-table-column>
      <el-table-column
        align="center"
        prop="problem_type"
        label="问题类型">
      </el-table-column>
      <el-table-column
        align="center"
        prop="creator_name"
        label="创建人">
      </el-table-column>
      <el-table-column
        align="center"
        prop="functionary"
        label="负责人">
      </el-table-column>
      <el-table-column
        align="center"
        label="期望完成时间">
        <template slot-scope="scope">
          {{scope.row.expect_end_time ? dateFormat1('yyyy-mm-dd',scope.row.expect_end_time) : ''}}
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        prop="reality_end_time"
        min-width="90px"
        label="实际完成时间">
      </el-table-column>
      <el-table-column
        align="center"
        label="状态">
        <template slot-scope="scope">
          <span v-if="scope.row.problem_status == 1">待处理</span>
          <span v-else-if="scope.row.problem_status == 2">处理中</span>
          <span v-else-if="scope.row.problem_status == 3">待确认</span>
          <span v-else-if="scope.row.problem_status == 4">已解决</span>
          <span v-else-if="scope.row.problem_status == 5">请求再次处理</span>
          <span v-else-if="scope.row.problem_status == 6">已关闭</span>
        </template>
      </el-table-column>
      <el-table-column
        v-if="!isDisbale"
        align="left"
        header-align="center"
        prop="name"
        label="操作"
      >
        <template slot-scope="scope">

          <div style="display:flex;width: 100%;flex-wrap: wrap">
            <!--            <div style="margin-right: 10px">-->
            <!--              <el-button size="medium" type="text" @click="detailClick(scope.row.id)">-->
            <!--                详情-->
            <!--              </el-button>-->
            <!--            </div>-->
            <el-button size="medium" type="text" v-if="scope.row.problem_status == 1 && checkCreator(scope.row.functionary_id) && scope.row.problem_status != 6" @click="startProblem(scope.row.id)">
              开始处理
            </el-button>
            <el-button class="text-btn-red" size="medium" type="text" v-if="scope.row.problem_status == 1 && checkCreator(scope.row.creator_id) && scope.row.problem_status != 6" @click="deleteClick(scope.row.id)">
              关闭问题
            </el-button>
            <el-button size="medium" type="text" v-if="(scope.row.problem_status == 2 || scope.row.problem_status == 5) && checkCreator(scope.row.functionary_id) && scope.row.problem_status != 6" @click="reportClick(scope.row.id)">
              问题反馈
            </el-button>
            <el-button size="medium" type="text" v-if="scope.row.problem_status == 3 && checkCreator(scope.row.creator_id) && scope.row.problem_status != 6" @click="acceptClick(scope.row.id)">
              问题确认
            </el-button>
          </div>


        </template>

      </el-table-column>
    </el-table>

    <el-dialog
      title="创建问题"
      v-if="dialogVisible"
      :visible.sync="dialogVisible"
      width="800px"
      :before-close="handleClose">

      <add-problem-view ref="addProblem" :isProject="isProject" :data="problemData" :task-list="taskList" :members="members"></add-problem-view>

      <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="confirmClick">提交问题</el-button>
        </span>
    </el-dialog>

    <el-dialog
      title="问题详情"
      :visible.sync="detailVisible"
      width="700px"
      :before-close="detailClose">

      <problem-detail-view :data="problemDetail"></problem-detail-view>

      <span slot="footer" class="dialog-footer">

          <el-button type="primary" v-if="problemDetail.problem_status == 1 && checkCreator(problemDetail.functionary_id) && !problemDetail.problem_status != 6" @click="startProblem(problemDetail.id)">
            开始处理
          </el-button>

          <el-button v-if="problemDetail.problem_status == 1 && checkCreator(problemDetail.creator_id) && !problemDetail.problem_status != 6" @click="deleteClick(problemDetail.id)">
            关闭问题
          </el-button>

          <el-button type="primary" v-if="(problemDetail.problem_status == 2 || problemDetail.problem_status == 5) && checkCreator(problemDetail.functionary_id) && !problemDetail.problem_status != 6" @click="reportClick(problemDetail.id)">
            问题反馈
          </el-button>

          <el-button type="primary" v-if="problemDetail.problem_status == 3 && checkCreator(problemDetail.functionary_id) && !problemDetail.problem_status != 6" @click="acceptClick(problemDetail.id)">
            问题确认
          </el-button>

          <el-button @click="detailVisible = false">
            关闭
          </el-button>

      </span>
    </el-dialog>

    <el-dialog
      width="700px"
      title="问题反馈"
      v-if="reportVisible"
      :visible.sync="reportVisible"
      append-to-body>

      <el-form :model="reportData" class="demo-form-inline" label-width="100px" size="medium" label-position="left" >

        <el-form-item label="反馈结果描述">
          <el-input
            v-model="reportData.result_describe"
            placeholder="请输入反馈结果描述"
            type="textarea"
            :rows="4">
          </el-input>
        </el-form-item>

        <el-form-item label="备注">
          <el-input
            v-model="reportData.remark"
            placeholder="请输入备注"
            type="textarea"
            :rows="2">
          </el-input>
        </el-form-item>

        <el-form-item label="附件">
          <upload ref="upload" :edit-list="reportData.accessory" @uploadSuccess="uploadSuccess" @deleteSuccess="deleteSuccess" />

        </el-form-item>

      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="reportVisible = false">取 消</el-button>
        <el-button type="primary" @click="reportConfirm">确 定</el-button>
      </span>
    </el-dialog>

    <el-dialog
      width="500px"
      title="问题确认"
      :visible.sync="acceptVisible"
      append-to-body>

      <!--      <el-form :model="problemDetail" class="demo-form-inline" label-width="100px" size="medium" label-position="left" >-->



      <!--      </el-form>-->

      <el-form :model="acceptData" class="demo-form-inline" label-width="100px" size="medium" label-position="left" >

        <el-form-item label="反馈结果描述">
          <div>{{problemDetail.result_describe}}</div>
        </el-form-item>

        <el-form-item label="反馈结果备注">
          <div>{{problemDetail.remark}}</div>
        </el-form-item>

        <el-form-item label="附件">
          <file-preview :file-list="problemDetail.accessory" />
        </el-form-item>

        <el-form-item label="确认结果">
          <el-select v-model="acceptData.problem_result" placeholder="请选择确认结果">
            <el-option
              v-for="item in acceptResult"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="确认意见">
          <el-input
            v-model="acceptData.acceptance_opinion"
            placeholder="请输入确认意见"
            type="textarea"
            :rows="4">
          </el-input>
        </el-form-item>

        <el-form-item label="备注">
          <el-input
            v-model="acceptData.remark_result"
            placeholder="请输入备注"
            type="textarea"
            :rows="2">
          </el-input>
        </el-form-item>

      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="acceptVisible = false">取 消</el-button>
        <el-button type="primary" @click="acceptConfirm">确 定</el-button>
      </span>
    </el-dialog>

  </div>
</template>

<script>
    import problemDetailView from "./problemDetailView";
    import addProblemView from "./addProblemView";

    export default {
        name: "problemView",
        components:{addProblemView,problemDetailView},
        props:{
            datas:{
                type:Object,
                default:function () {
                    return{

                    }
                }
            },
            projectId:String,
            projectName:String,
            taskList:Array,
            isDisbale:{
                type:Boolean,
                default:function () {
                    return false
                }
            },
            isProject:{
                type:Boolean,
                default(){
                    return false
                }
            },
            person:{
                type:Object,
                default(){
                    return{}
                }
            }
        },
        data:function () {
            return{
                tableData:[],
                pageSize:100,
                pageNum:1,

                dialogVisible:false,
                detailVisible:false,

                problemData:{},

                problemDetail:{},

                reportVisible:false,
                reportData:{},

                problemId:'',

                acceptVisible:false,
                acceptData:{},
                acceptResult:[
                    {
                        value:1,
                        label:'已解决关闭问题'
                    },
                    {
                        value:2,
                        label:'未解决继续问题'
                    }
                ],

                members:[],
            }
        },
        activated(){
            this.getListData();
        },
        methods:{
            checkCreator:function(id){
                if (this.$store.getters.userInfo.user.id == id){
                    return true
                }
                return false
            },
            addClick:function () {

                this.members = this.datas.task_member
                this.problemData = {
                    problem_no:'',
                    priority:'',
                    priority_id:'',
                    problem_name:'',
                    problem_type_id:'',
                    problem_type:'',
                    project_id:this.projectId,
                    project_name:this.projectName,
                    task_name:this.datas.task_name,
                    task_id:this.datas.id,
                    functionary:'',
                    functionary_id:'',
                    expect_end_time:'',
                    problem_describe:'',
                    target:'',
                }

                this.dialogVisible = true;
            },
            handleClose:function(){
                this.dialogVisible = false;
            },
            detailClose:function(){
                this.detailVisible = false;
            },
            getListData:function () {
                let data = {
                    project_id:this.projectId,
                    task_id:this.datas.id,
                    pager:{
                        limit:this.pageSize,
                        skip:this.pageNum,
                        OrderBy:'',
                        OrderMethod:-1
                    }
                }
                this.$api.PROJECT_WORK_PROBLEM_LIST(data).then(res=>{
                    if (res.code == 200){
                        this.tableData = res.data.data;
                    }
                }).catch(err=>{

                })
            },
            confirmClick:function () {

                if (this.$refs.addProblem){
                    this.$refs.addProblem.formValidate().then(val=>{
                        if (val){
                            this.problemData.expect_end_time = this.dealDateStr(new Date(this.problemData.expect_end_time)) + " 00:00:00"

                            this.$api.PROJECT_WORK_PROBLEM_CREATE(this.problemData).then(res=>{
                                if (res.code == 200){
                                    this.getListData();
                                }else{
                                    this.$message.error(res.msg)
                                }
                            }).catch(err=>{

                            })
                            this.dialogVisible = false;
                        }
                    })

                }

            },
            dealDateStr:function(date){
                let year = date.getFullYear();
                let month = date.getMonth() + 1;
                let day = date.getDate();
                if (month < 10){
                    month = "0" + month
                }
                if (day < 10){
                    day = "0" + day;
                }

                return year + "-" + month + "-" + day
            },
            deleteClick:function (id) {
                this.detailVisible = false;
                this.$api.PROJECT_WORK_PROBLEM_DELETE(id).then(res=>{
                    if (res.code == 200){
                        this.getListData();
                    }else{
                        this.$message.error(res.msg)
                    }
                }).catch(err=>{

                })
            },
            tableRowClick:function(row, column, event){
                if (column.label != '操作'){

                    this.$router.push({name:"problem-detail",query:{id:row.id}})
                    // this.$api.PROJECT_WORK_PROBLEM_DETAIL(row.id).then(res=>{
                    //     if (res.code == 200){
                    //         this.problemDetail = res.data;
                    //         this.detailVisible = true;
                    //     }else{
                    //         this.$message.error(res.msg)
                    //     }
                    // }).catch(err=>{
                    //
                    // })
                }
            },
            detailClick:function (id) {

                this.$api.PROJECT_WORK_PROBLEM_DETAIL(id).then(res=>{
                    if (res.code == 200){
                        this.problemDetail = res.data;
                        this.detailVisible = true;
                    }else{
                        this.$message.error(res.msg)
                    }
                }).catch(err=>{

                })
            },
            startProblem:function (id) {
                this.detailVisible = false;
                this.$api.PROJECT_WORK_PROBLEM_UPDATE(id,2,{}).then(res=>{
                    if (res.code == 200){
                        this.getListData();
                    }else{
                        this.$message.error(res.msg)
                    }
                }).catch(err=>{

                })
            },
            reportClick:function (id) {
                this.problemId = id;
                this.reportData = {
                    result_describe:'',
                    remark:'',
                    accessory:[],
                }

                this.reportVisible = true;
            },
            deleteSuccess() {
                this.reportData.accessory = this.$refs.upload.emitFileList()
            },
            uploadSuccess() {
                this.reportData.accessory = this.$refs.upload.emitFileList()
            },
            reportConfirm:function () {

                this.detailVisible = false;

                this.$api.PROJECT_WORK_PROBLEM_UPDATE(this.problemId,3,this.reportData).then(res=>{
                    this.reportVisible = false;
                    if (res.code == 200){
                        this.getListData();
                    }else{
                        this.$message.error(res.msg)
                    }
                }).catch(err=>{
                    this.reportVisible = false;
                })

            },
            acceptClick:function(id){
                this.problemId = id;
                this.$api.PROJECT_WORK_PROBLEM_DETAIL(id).then(res=>{
                    if (res.code == 200){
                        this.problemDetail = res.data;

                        this.acceptData = {
                            problem_result:1,
                            acceptance_opinion:'',
                            remark_result:'',
                        }

                        this.acceptVisible = true;

                        this.getListData();
                    }else{
                        this.$message.error(res.msg)
                    }
                }).catch(err=>{

                })

            },
            acceptConfirm:function () {
                this.detailVisible = false;
                let status = 4;
                if (this.acceptData.problem_result == 2){
                    status = 5
                }
                this.$api.PROJECT_WORK_PROBLEM_UPDATE(this.problemId,status,this.acceptData).then(res=>{
                    this.acceptVisible = false;
                    if (res.code == 200){
                        this.getListData();
                    }else{
                        this.$message.error(res.msg)
                    }
                }).catch(err=>{
                    this.reportVisible = false;
                })
            }
        }
    }
</script>

<style scoped>

</style>
